// components/custom/scroll-tabls/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    options: {
      type: Array,
      value: [{
        id: 1,
        name: '全部'
      }, {
        id: 2,
        name: '斗破苍穹'
      }, {
        id: 3,
        name: '凡人修仙传'
      }, {
        id: 4,
        name: '武动乾坤'
      }, {
        id: 5,
        name: '斗罗大陆'
      }, {
        id: 6,
        name: '从前有座剑灵山'
      }, {
        id: 7,
        name: '玄界之门'
      }, {
        id: 8,
        name: '魔天记'
      }, {
        id: 9,
        name: '元龙'
      }, {
        id: 10,
        name: '遮天'
      }],
      observer(newVal, oldVal, changePath) {
        this.setData({
          currentId: newVal.length > 0 ? (newVal[0].id) : 0
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentId: 0,
    scrollLeft: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleClick(e) {
      const id = Number(e.currentTarget.id);
      
      this.setData({
        currentId: id,
        scrollLeft: (Number(e.currentTarget.dataset.index) - 1) * 60
      })

      this.triggerEvent('click', {
        id
      }, {});
    },
  }
})